<script setup>
import { ref } from "vue";

// 表单的响应式对象
const loginData = ref({
  username: "",
  password: "",
});

// const loginFromRef = ref();

// const rules = {
//   username: [
//     { required: true, message: "账号不能为空", trigger: "blur" },
//     { min: 4, max: 10, message: "账号的字符长度为4 ~ 10", trigger: "blur" },
//   ],
//   password:[
//   { required: true, message: "密码不能为空", trigger: "blur" },
//   { min: 4, max: 10, message: "密码的字符长度为4 ~ 10", trigger: "blur" },
//   ]
// };

// 导入 userApi
import { userLoginService } from "@/api/userAPI";
// 使用 Element-Plus
import { ElMessage } from 'element-plus'
// 使用路由
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 使用 token 
import useTokenStore from "@/stores/token";

const useToken = useTokenStore();

// 登入
const login = async () => {
    // 验证数据
    // loginFromRef.value.validate(  async (isValid, invalidFields) => {
    // 验证通过
    // if (isValid) {
       
        // 把输入框的数据提交到后台
        // ref() 的值需要 .value 属性获取
        //console.log(JSON.stringify(loginData.value))
        const result = await  userLoginService(loginData.value);
        // 登入成功
        if (result.code == 200) {
            ElMessage.success(result.message);
            // 持久化存储 token 
            useToken.setToken(result.data);
            // 跳转首页
            router.push("/index")
        }
        // 登入失败
        else {
          ElMessage.info(result.message);
          // 跳转登入页
          router.push("/");
        }


    // }
  // });
}
</script>

<template>
    <div class="login-bg">
    <div class="login">
      <div class="message">颐养中心</div>
      <div id="darkbannerwrap"></div>
      <form :model="loginData">
        <input
          name="username"
          v-model="loginData.username"
          placeholder="用户名"
          type="text"
        />
        <hr class="hr15" />
        <input
          name="password"
          v-model="loginData.password"
          placeholder="密码"
          type="password"
        />
        <hr class="hr15" />
        <input
          value="登录"
          @click="login"
          style="width: 100%"
          type="button"
        />
        <hr class="hr20" />
      </form>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login-bg {
  width: 100%;
  height: 100vh;
  background: url(@/assets/logbg.jpg) no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
}

.login {
  margin: 200px auto 0 auto;
  min-height: 420px;
  max-width: 420px;
  padding: 40px;
  background-color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

.login a.logo {
  display: block;
  height: 58px;
  width: 167px;
  margin: 0 auto 30px auto;
  background-size: 167px 42px;
}

.login .message {
  margin: 10px 0 0 -58px;
  padding: 18px 10px 18px 60px;
  background: #44aff0;
  position: relative;
  color: #fff;
  font-size: 20px;
}

.login #darkbannerwrap {
  width: 18px;
  height: 10px;
  margin: 0 0 20px -58px;
  position: relative;
}
.login input[type="password"],
.login input[type="text"],
select {
  border: 1px solid #dcdee0;
  vertical-align: middle;
  border-radius: 3px;
  height: 50px;
  padding: 0 16px;
  font-size: 14px;
  color: #555;
  outline: 0;
  width: 100%;
  box-sizing: border-box;
}
.login input[type="email"]:focus,
.login input[type="file"]:focus,
.login input[type="password"]:focus,
.login input[type="text"]:focus,
select:focus {
  border: 1px solid #44aff0;
}

.login input[type="button"],
.login input[type="submit"] {
  display: inline-block;
  vertical-align: middle;
  padding: 12px 24px;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  background-color: #44aff0;
  border-radius: 3px;
  border: none;
  -webkit-appearance: none;
  outline: 0;
  width: 100%;
}

.login hr {
  background: #fff;
}

.login hr.hr15 {
  height: 15px;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.login hr.hr20 {
  height: 20px;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
</style>
